<template>
    <div>
        <h1>门店信息列表展示</h1>
        <a href="/">门店信息录入</a>
        <br>
        门店名称: <input type="text" v-model="find.name">
        <input type="button" value="查询" @click="Show">
        <table class="table">
            <thead>
                <tr>
                    <td>门店名称</td>
                    <td>门店地址</td>
                    <td>门店电话</td>
                    <td>门店人数</td>
                    <td>门店大小</td>
                    <td>操作</td>
                    
                </tr>
            </thead>
            <tbody>
                <tr v-for="a in data">
                    <td>{{a.name  }}</td>
                    <td>{{ a.addr }}</td>
                    <td>{{ a.phone }}</td>
                    <td>{{a.num  }}</td>
                    <td>{{a.sise  }}</td>
                    <td><input type="button" value="查看详情" @click="UptMember(a.id)"></td>
                </tr>
            </tbody>
        </table>
        共{{swert.count  }}行，共{{swert.totalpage  }}页，当前第{{find.index  }}页，每页{{find.size  }}行
        <input type="button" value="首页" @click="Fanye(1)">
        <input type="button" value="上一页" @click="Fanye(find.index -1)">
        <input type="button" v-for="b in swert.totalpage"  :value="b" @click="Fw(b)">
        <input type="button" value="下一页" @click="Fanye(find.index +1)">
        <input type="button" value="尾页" @click="Fanye(swert.totalpage)">
        <select v-model="find.index" @click="Fs">
            <option :value="2">请选择</option>
            <option :value="3">每页三行</option>
            <option :value="5">每页五行</option>
            <option :value="7">每页七行</option>
        </select>
        跳转：
        <input type="number" v-model="tets">
        <input type="button" value="跳转" @click="Fanye(tets)">
    </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from "vue"
import axios from "axios";
import { useRouter } from "vue-router";
const router=useRouter()
const UptMember=(id:any)=>{
        router.push({path:"/UptView",query:{id:id}})
}
const data=ref([{
    "id": 1,
      "name": "",
      "addr": "",
      "phone": "",
      "num": 0,
      "sise": 0
}])
onMounted(()=>{
    Show()
})
const Show=()=>{
    axios.get("https://localhost:7034/api/Member/GetMember",{params:find.value}).then(res=>{
        data.value=res.data.data
        swert.value.count=res.data.count
        swert.value.totalpage=Math.ceil(swert.value.count/find.value.size);
    })
}
const Fw=(val:any)=>{
      find.value.index=val;
      Show();
}
const find=ref({
    index:1,
    size:2,
    name:""
})
const Fs=()=>{
    find.value.index=1
    Show()
}
const swert=ref({
    count:0,
    totalpage:0
})
const Fanye=(val:any)=>{
      if(val>-1 && val<=swert.value.totalpage){
        find.value.index=val
        Show();
      }
}
</script>

<style scoped>

</style>